<template>
  <demoBlock title="基础用法">
    <vcu-tabs v-model:active="active">
      <vcu-tab title="默认">
        <vcu-empty description="描述文字" />
      </vcu-tab>
      <vcu-tab title="等待">
        <vcu-empty image="waiting" description="描述文字" />
      </vcu-tab>
      <vcu-tab title="错误">
        <vcu-empty image="error" description="描述文字" />
      </vcu-tab>
      <vcu-tab title="无网络">
        <vcu-empty image="network" description="描述文字" />
      </vcu-tab>
      <vcu-tab title="404">
        <vcu-empty image="error404" description="描述文字" />
      </vcu-tab>
      <vcu-tab title="自定义图片">
        <vcu-empty :image="imageUrl" description="描述文字" />
      </vcu-tab>
    </vcu-tabs>
  </demoBlock>
</template>
<script>
import { defineComponent, getCurrentInstance, ref, computed } from "vue";

export default defineComponent({
  setup() {
    const active = ref(0);
    const { proxy } = getCurrentInstance();
    const imageUrl = computed(() => {
      return `${proxy.serverIp}/images/err_page.png`;
    });

    return { active, imageUrl };
  },
});
</script>
